<template>
	<view class="miou-leisurely-box bg-white"  v-show="indexPage=='leisurely'">
		
		<!--搜索框-->
		<bar-search searchText="搜索相关闲本" searchType='idle'></bar-search>
				
		<!--轮播图-->
		<view class="miou-swiper-box" v-if="swiperList.length">
			<swiper
				class="screen-swiper square-dot c"
				autoplay
				indicator-dots
			>
				<swiper-item
					v-for="(item, index) in swiperList"
					:key="index"
					@click.stop="onGoToBanner(item)"
				>
					<image class="swiper-img" :src="item.imageurl"
					/>
				</swiper-item>
			</swiper>
		</view>
		

		
		<!-- 闲本列表 -->
		<empty v-if="emptyList"></empty>
		<view class="miou-leisurely-list" v-if="leisurelyList.length">
			<leisurely-grid :list="leisurelyList"
				:loadingType = 'loadingType'
			></leisurely-grid>
		</view>
		
		

		<view class="add-game" @click="addIdle">
			<image src="/static/img/ic_secondhand_publish.png" mode="widthFix"></image>
		</view>
		
		<view class="cu-tabbar-height"></view>
	
	</view>
</template>



<script>
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import viewMessage from '@/components/box/ViewMessage.vue';
import leisurelyGrid from '@/components/list/leisurely.vue'
import empty from "@/components/basics/empty.vue";
import appMixin from './appMixin';
import { Banner } from '@/models/banner.js';
import { Leisurely } from '@/models/leisurely.js';


//======================================================================

export default {
	name: 'Viewleisurely',
	mixins: [appMixin],
	components: {
		uniLoadMore,
		leisurelyGrid,
		empty
	},
	data() {
		return {
			pagenum: 1,
			loadingType: 'more',
			swiperList: [],
			leisurelyList: [],
			emptyList: false
		}
	},
	
	mounted() {
		this.getBannerList()
		this.getLeisurelyList(this.pagenum)
	},
	methods: {
		async getBannerList() {
			let swiperList = await Banner.getLeisurelyBanner()
			this.swiperList = swiperList
			console.log(swiperList);
		},

		async getLeisurelyList(pagenum) {
			//防止重复加载
			Leisurely.getLeisurelyList(pagenum).then(leisurelyList => {
				this.leisurelyList = this.leisurelyList.concat(leisurelyList)
				if (leisurelyList.length < 20) {
					this.loadingType = 'noMore'
					return
				}
				this.loadingType = 'more'
				this.emptyList = !this.leisurelyList.length
			})
			
		},
		addIdle() {
			this.$jumpPages('addIdle')
		},
		searchTap() {
			this.$jumpPages('search')
		},

		onGoToBanner(banner) {
		    let type = Banner.gotoTarget(banner)
		    if (type == 'web' && banner.httpurl) {
		    	this.$jumpPages('web',{
		    		url: encodeURIComponent(banner.httpurl)
		    	});
		    }
		},
		
		refresh(){
			if(this.indexPage=='leisurely') {
				this.emptyList = false
				this.pagenum = 1
				this.loadingType = 'more'
				this.leisurelyList = []
				this.getLeisurelyList(this.pagenum)
			}
			
		},
		setReachBottom() {
			if(this.indexPage == 'leisurely') {
				if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
				    return
				}
				this.pagenum = this.pagenum + 1
				this.getLeisurelyList(this.pagenum)
			}
		},
	}
}
</script>


<style lang="scss" scoped>
.loading{
	padding-top: 200rpx;
	font-size: 30rpx;
	text-align: center;
	height: 800rpx;
	.img{
		display: block;
		width: 200rpx;
		margin: 20rpx auto;
	}
}
.add-game{
	position:fixed;
	right: 0;
	z-index: 999;
	width: 121rpx;
	height: 121rpx;
	bottom: 120rpx;
	right: 30rpx;
}
.miou-head-search-box {
	position: relative;
	height: 100rpx;
    .miou-search-box {
		background: #fff;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 9999;
		.message{
			width: 38rpx;
		}
    }
	.search-form{
		padding: 0 24rpx;
	}
	.cuIcon-filter{
		background-color: transparent;
		font-size: 20px;
	}
    .miou-flex-tab {
        position: relative;
        
    }
}


.scenario-list {
	padding: 20rpx 10rpx;
	display: flex;
	white-space: nowrap;
	.scenario {
		padding-bottom: 10rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		position: relative;
		line-height: 1.6;
		position: relative;
		overflow: hidden;
		flex-shrink: 0;
		text-align: center;
		.pimg {
			display: block;
			width: 168rpx;
			height: 234rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background-color: #EAEAEA;
		}
		.pimg_img{
			width: 168rpx;
			height: 234rpx;
		}
		.scenname{
			text-align: left;
			width: 168rpx;
			font-size: 11px;
			line-height: 1;
			font-weight: 400;
			padding: 20rpx 0 12rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;  
		}
		.score-warp{
			display: flex;
			align-items: center;
			.star{
				width: 20rpx;
				height: 20rpx;
				margin-right: 1px;
				background-image: url(/static/img/ic_index_star_normal.png);
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			&.star1 .star:nth-child(1),
			&.star2 .star:nth-child(-n + 2),
			&.star3 .star:nth-child(-n + 3),
			&.star4 .star:nth-child(-n + 4),
			&.star5 .star:nth-child(-n + 5) {
				background-image: url(/static/img/ic_index_star_select.png);
			}
			&.star0.dot .star:nth-child(1),
			&.star1.dot .star:nth-child(2),
			&.star2.dot .star:nth-child(3),
			&.star3.dot .star:nth-child(4),
			&.star4.dot .star:nth-child(5) {
				background-image: url(/static/img/ic_index_star_half.png);
			}
			
			.score{
				line-height: 1;
				font-size: 20rpx;
				font-weight: 400;
				color: #909090;
			}
		}
		
	}
	.empty{
		min-width: 10rpx;
	}
}

.miou-swiper-box {
    width: 690rpx;
	margin: 10rpx auto;
    .screen-swiper {
        height: 398rpx;
		min-height: 398rpx;
		.swiper-img{
			width: 100%;
			height: 100%;
		}
    }
}
		
</style>
